<template>
  <transition :name="transitionName" v-bind="$props">
    <slot></slot>
  </transition>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-transition-slide-fade",
  props: {
    appear: { type: Boolean },
    left: { type: Boolean },
    right: { type: Boolean },
    up: { type: Boolean },
    down: { type: Boolean },
    duration: { type: [Number, String] }
  },

  setup(props) {
    const direction = computed(() => {
      return (
        (props.up && "up") ||
        (props.down && "down") ||
        (props.left && "left") ||
        (props.right && "right") ||
        "down"
      );
    });
    const transitionName = computed(() => {
      return `slide-fade-${direction.value}`;
    });
    return {
      direction,
      transitionName
    };
  }
};
</script>
